<template>
  <div>
    <div class="goods">
      <div class="menu-wrapper" ref="menuWrapper">
        <ul>
          <li class="menu-item" :class="{'current':currentIndex===index}" v-for="(item, index) in goodsList" :key="index" @click="selectMenu(index, $event)">
            <span class="text border-1px">
              <i class="icon" :class="classMap[item.type]" v-show="item.type!=-1"></i>
              <span>{{item.name}}</span>
            </span>
          </li>
        </ul>
      </div>
      <div class="food-wrapper" ref="foodWrapper">
        <ul>
          <li v-for="(item, index) in goodsList" :key="index" class="food-list-hook">
            <h1 class="food-title">{{item.name}}</h1>
            <ul class="food-list">
              <li v-for="(food, index2) in item.foods" class="food-item border-1px" :key="index2">
                <div class="food-icon">
                  <img :src="food.icon" alt="">
                </div>
                <div class="food-info">
                  <div class="item-title">{{food.name}}</div>
                  <div class="item-desc">{{food.description}}</div>
                  <div class="item-count">
                    <span>月售{{food.sellCount}}份</span>
                    <span>好评率{{food.rating}}%</span>
                  </div>
                  <div class="item-price">
                    <span class="now">￥{{food.price}}</span>
                    <span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
                  </div>
                </div>
                <div class="cart">够</div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <m-footer></m-footer>
  </div>
</template>
<script>
import axios from 'axios'
import BScroll from 'better-scroll'
import MFooter from '../footer/Footer'
export default {
  name: 'MGoods',
  components: {
    MFooter
  },
  data () {
    return {
      goodsList: [],
      currentIndex: 0
    }
  },
  created () {
    var _this = this
    _this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
    axios.get('/api/goods').then(function (res) {
      var data = res.data
      _this.goodsList = data.data
      _this._initScroll()
    })
  },
  methods: {
    // 初始化BScroll
    _initScroll () {
      this.menuScroll = new BScroll(this.$refs.menuWrapper, {
        click: true
      })
      this.foodScroll = new BScroll(this.$refs.foodWrapper, {
        click: true
      })
    },
    // 点击菜单
    selectMenu (index, e) {
      this.currentIndex = index
      let foodList = this.$refs.foodWrapper.getElementsByClassName('food-list-hook')
      let el = foodList[index]
      this.foodScroll.scrollToElement(el, 500)
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~@/common/stylus/mixin.styl'
.goods
  display:flex
  position:absolute
  top:174px
  bottom:46px
  width:100%
  overflow:hidden
  .menu-wrapper
    flex:0 0 80px
    width:80px
    background:#f3f5f7
    .menu-item
      display:table
      width:56px
      height:54px
      padding:0 12px
      line-height:14px
      &.current
        position: relative
        z-index: 10
        margin-top: -1px
        background: #fff
        font-weight: 700
        .text
          border-none()
      .icon
        display:inline-block
        vertical-align: top
        width: 12px
        height: 12px
        margin-right: 2px
        background-size: 12px 12px
        background-repeat: no-repeat
        &.special
          bg-image('~@/common/images/special_3')
        &.discount
          bg-image('~@/common/images/discount_3')
        &.decrease
          bg-image('~@/common/images/decrease_3')
        &.invoice
          bg-image('~@/common/images/invoice_3')
        &.guarantee
          bg-image('~@/common/images/guarantee_3')
      .text
        display:table-cell
        width:56px
        vertical-align:middle
        border-1px(rgba(7, 17, 27, .1))
        font-size:12px
  .food-wrapper
    flex:1
    .food-title
      width:100%
      height:26px
      line-height:26px
      color:rgb(147,153,159)
      font-size:12px
      padding-left:14px
      border-left:2px solid #d9dde1
      background:#f3f5f7
    .food-list
      padding:0 18px
      background: #ffffff
      .food-item
        display:flex
        padding: 18px 0
        border-1px(rgba(7,17,27,0.1))
        &:last-child
          border-none()
        .food-icon
          flex: 0 0 57px
          width:57px
          margin-right:10px
          img
            width:100%
        .food-info
          .item-title
            margin-top:2px
            font-size:14px
            line-height:14px
            color:rgb(7,17,27)
          .item-desc
            margin-top:8px
            font-size:10px
            color:rgb(147,153,159)
          .item-count
            margin:8px 0
            font-size:10px
            color:rgb(147,153,159)
            span:first-child
              margin-right:12px
          .item-price
            font-weight:700
            line-height:24px
            span:first-child
              font-size:14px
              margin-right:8px
              color:#f01414
            span:last-child
              font-size:10px
              text-decoration:line-through
              color:rgb(147,153,159)
        .cart
          position:absolute
          right:0
          bottom:12px
</style>
